import { createApp } from 'vue'
import pinia from './stores'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import './styles/index.scss'
import ElSvg from './components/SvgIcon/ElSvg'
import './permission'
//引入全局组件三级分类
import Category from './components/category/category.vue'
import { useUserInfoStore } from './stores/userInfo'
const app = createApp(App)
//注册为全局组件
app.component('Category', Category)
//引入mock，让mock执行一次
import './mock/mockServe'


import ECharts from 'vue-echarts'
import { use } from "echarts/core"

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
])

app.component('v-chart', ECharts)


// import ECharts from 'vue-echarts'
// import { use } from "echarts/core"

// // import ECharts modules manually to reduce bundle size
// import {
//   CanvasRenderer
// } from 'echarts/renderers'
// import {
//   BarChart
// } from 'echarts/charts'
// import {
//   GridComponent,
//   TooltipComponent
// } from 'echarts/components'

// use([
//   CanvasRenderer,
//   BarChart,
//   GridComponent,
//   TooltipComponent
// ])

// app.component('v-chart', ECharts)










//按钮权限：自定义一个全局自定义指令
//第一个参数：自定义指令的名字
//第二个参数：自定义指令钩子函数
app.directive('visite', {
  //挂载完毕：当使用指令的节点挂载完毕，执行一次
  mounted(el, binging) {
    //如果仓库里面buttons数组没有这个标记销毁
    if (!useUserInfoStore().buttonsList.includes(binging.value)) {
      //removeChild类似于v-if：直接从DOM中销毁
      el.parentNode.removeChild(el);
    }
  }
});





ElSvg(app)
app.use(pinia)
  .use(router)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .mount('#app')
